import React, { useState } from 'react';
import { Form, Button, Input, Modal, Row, Col } from 'antd';

const FormItem = Form.Item;
const formLayout = {
  labelCol: {
    span: 7,
  },
  wrapperCol: {
    span: 17,
  },
};

const UpdateForm = (props) => {
  const [formVals, setFormVals] = useState({
    id: props.values.id,
    cputhreshold: props.values.cputhreshold,
    memorythreshold: props.values.memorythreshold,
    netthreshold: props.values.netthreshold,
    /* diskthreshold: props.values.diskthreshold, */
  });
  const [form] = Form.useForm();
  // const {Option} = Select;
  const {
    onSubmit: handleUpdate,
    onCancel: handleUpdateModalVisible,
    updateModalVisible,
    values,
  } = props;

  const validateMessages = {
    // eslint-disable-next-line no-template-curly-in-string
    required: '${label}是必填的!',
    types: {
      // eslint-disable-next-line no-template-curly-in-string
      url: '${label}不是有效的url地址!',
    },
  };

  const handleNext = async () => {
    const fieldsValue = await form.validateFields();
    setFormVals({ ...formVals, ...fieldsValue });
    handleUpdate({ ...formVals, ...fieldsValue });
  };

  const renderContent = () => {
    return (
      <>
        <Row gutter={16}>
          <Col className="gutter-row" span={0}>
            <FormItem name="id" label="id">
              <Input />
            </FormItem>
          </Col>
          <Col className="gutter-row" span={24}>
            <FormItem
              name="cputhreshold"
              label="CPU告警阀值(%)"
              required
              rules={[{ required: true }]}
            >
              <Input />
            </FormItem>
          </Col>
          <Col className="gutter-row" span={24}>
            <FormItem
              name="memorythreshold"
              label="内存告警阀值(%)"
              required
              rules={[{ required: true }]}
            >
              <Input />
            </FormItem>
          </Col>
          <Col className="gutter-row" span={24}>
            <FormItem
              name="netthreshold"
              label="网络告警阀值(%)"
              required
              rules={[{ required: true }]}
            >
              <Input />
            </FormItem>
          </Col>
          {/* <Col className="gutter-row" span={24}>
            <FormItem
              name="diskthreshold"
              label="磁盘告警阀值(%)"
              required
              rules={[{ required: true }]}
            >
              <Input />
            </FormItem>
          </Col> */}
        </Row>
      </>
    );
  };

  const renderFooter = () => {
    return (
      <>
        <Button type="primary" onClick={() => handleNext()}>
          更新
        </Button>
        <Button onClick={() => handleUpdateModalVisible(false, values)}>取消</Button>
      </>
    );
  };

  return (
    <Modal
      width={500}
      bodyStyle={{
        padding: '32px 40px 48px',
      }}
      destroyOnClose
      title="更新阀值"
      visible={updateModalVisible}
      footer={renderFooter()}
      onCancel={() => handleUpdateModalVisible()}
    >
      <Form
        layout="horizontal"
        {...formLayout}
        form={form}
        initialValues={{
          id: formVals.id,
          cputhreshold: formVals.cputhreshold,
          memorythreshold: formVals.memorythreshold,
          netthreshold: formVals.netthreshold,
          /* diskthreshold: formVals.diskthreshold, */
        }}
        validateMessages={validateMessages}
      >
        {renderContent()}
      </Form>
    </Modal>
  );
};

export default UpdateForm;
